<template>
  <div class="sales-board">
      <!-- //上层信息 -->
      <div class="sales-board-intro">
           <h2>流量分析</h2>
        <p>上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来

要使用该控件的属性值（输入值），可以这样：上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来

要使用该控件的属性值（输入值），可以这样：</p>
      </div>
      <!-- //上层信息 -->
      <!-- 中间 -->
      <div class="sales-board-form">
          <!-- // 购买数量： -->
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  购买数量：
              </div>
              <div class="sales-board-line-right">
                  <counter :max='counter.max' :min='counter.min' @counter="getFoot('counter',$event)"/>
              </div>
          </div>
          <!-- // 产品类型： -->
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                 产品类型：
              </div>
              <div class="sales-board-line-right">
                  <!-- ：newData ='downMenu'  接收的数据 -->
                 <downMenu :newDate="downMenu" @downmenu="getFoot('downmenu',$event)"/>
              </div>
          </div>
          <!-- 单选按钮 -->
                <div class="sales-board-line">
              <div class="sales-board-line-left">
                  有效时间：
              </div>
              <div class="sales-board-line-right">
                  <radios :radiosList="radios" @radios="getFoot('Radios',$event)"/>
              </div>
          </div>
          <!-- //总价 -->
           <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                 {{getTotalprice}}元
              </div>
          </div>
          <!-- //总价 -->
          <div class="sales-board-line time-board-line">
                <div class="sales-board-line-left">
                 
                </div>
                <div class="sales-board-line-right">
                 <a href="#" class="button">立即购买</a>
                </div>
            </div>
      </div>
       <!-- {{getOrder}} -->
      <!-- 中间 -->
      <!-- 下层信息 -->
      <div class="sales-board-des">
        <h2>流量分析</h2>
        <p>上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来

要使用该控件的属性值（输入值），可以这样：上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来

要使用该控件的属性值（输入值），可以这样：</p>
<h3>用户行为指标</h3>
<ul>
    <li>上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来
要使用该控件的属性值（输入值）</li>
<li>上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来
要使用该控件的属性值（输入值）</li>
<li>上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来
要使用该控件的属性值（输入值）</li>
<li>上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来
要使用该控件的属性值（输入值）</li>
</ul>
    </div>
    <!-- 下层信息 -->
   
  </div>
</template>

<script>
import counter from './component/counter.vue'
import downMenu from './component/downMenu.vue'
import radios from './component/radios.vue'
export default {
  name:'one',
  data(){
      return{
          //总价初始化
          
          //因为把他们放到一个空的对象里面的时候，总是不点击的显示的黑色 所以初始化
          counter:1,
          downmenu:1,
          Radios:1,
          totalPrice:0,
           //指定购买数量的值
           counter1:{
               max:10,
               min:1
           },
           //父级下拉的数据
           downMenu:[
                {
            name:'初级版',
            value:1
        },
         {
            name:'中级版',
            value:2
        },
        {
            name:'高级版',
            value:3
        }
           ],
        //    月份
        radios:[
              {
                        time:'1月',
                        value:1
                    },
                     {
                        time:'3月',
                        value:3
                    },
                     {
                        time:'6月',
                        value:6
                    },
                     {
                        time:'年费',
                        value:12
                    }
        ]
      }
  },
  

  components:{
      counter,
      downMenu,
      radios
  },
 
  methods:{
    //   //购买数量
    //   getCounter(data){
    //       console.log(data);//1 2 3
    //   },
    //   //下拉菜单
    //   getdownmenu(index){
    //       console.log(index);//1 2 3
    //   },
    //   //有效时间
    //  getradios(index){
    //      console.log(index);// 1 3 6 12
    //  }
    //为了区分他们我们使用
   getFoot(key,value){
     
    //    console.log(key,value);
       this[key]=value;//把值对应起来了
    //    var t=this.downmenu;
    //    console.log(typeof t);
   
      var readyData={
          "counter":this.counter,//5
          "downmenu":this.downmenu,//3
          "Radios":this.Radios//1
      }
   
      //总价
     //this.totalPrice=readyData.counter*5+readyData.downmenu*3+readyData.Radios*1

   }
  },
    computed:{
    
      getTotalprice:function(){
//    console.log( this.counter)
this.$store.dispatch("updatePrice",this.downmenu * 3 + this.Radios * 1 + this.counter * 1);
            // return    this.downmenu * 3 + this.Radios * 1 + this.counter * 1;
        //     alert(1);
               return this.$store.getters.getTotalPrice;
      },
    //   getOrder(){
    //     //   return 
    //        return this.$store.getters.getOrder;
    //   }
  }

}
</script>

<style scoped>
.sales-board-form{background:#fff;margin:10px 0;padding:10px;}
.sales-board-intro{background:#fff;}
.sales-board-intro h2{font-size:20px;padding:20px;}
.sales-board-line{margin-bottom:20px;}
.sales-board-intro p{
    background: #f7fcff;
    padding:10px 20px;
    color:#999;
    line-height:1.8;
}
.sales-board-line-left{
    display:inline-block;
    width:100px;
}
.sales-board-line-right{
    display:inline-block;
    width:75%;
}
.sales-board-des{border-top:20px solid #f0f0f5;background:#fff;
padding:15px 20px;}
.sales-board-des p{
    line-height:1.6;
}
.sales-board-des h2{
    font-size:20px;
    padding-bottom:15px;
}
.sales-board-des h3{
    font-size:18px;
    font-weight:bold;
    padding:20px 0 10px 0;
}
.sales-board-des li{padding:5px 0;}
.sales-board-table{
    width:100%;
    margin-top:20px;
}
.sales-board-table th{
    background-attachment: #4fc08d;
    color:#fff;
}
.sales-board-table td{
    border:1px solid #f0f2f5;
    padding:15px;
}
.buy-dialog-title{
    font-size:16px;
    font-weight:bold;
}
.buy-dialog-btn{
    margin-top:20px;
}
.buy-dialog-table{
    width:100%;
    margin-bottom:20px;
}
.buy-dialog-table td,.buy-dialog-table th{
    border:1px solid #e3e3e3;
    text-align:center;
    padding:5px 0;
}
.buy-dialog-table th{
    background:#4fc08d;
    color:#fff;
    border:1px solid #4fc08d;
}
.time-board-line{margin-top:20px;}
.button{background:green;padding:10px 20px;color:#fff;display:inline-block;}
.button{color:#fff;}
</style>
